<template>
  <div class="my-claim">
    <van-nav-bar left-text="返回" left-arrow @click-left="backPrePage">
    </van-nav-bar>

    <van-card
        :desc="cardData.desc"
        :title="cardData.title"
        :thumb="cardData.thumb"
    >
    </van-card>

    <van-field class="my-field"
               required
               readonly
               clickable
               name="picker"
               :value="value"
               label="被保人："
               placeholder="购险时保险保障人"
               @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
        required
        readonly
        clickable
        name="picker2"
        :value="value2"
        label="出险原因："
        placeholder="由于什么原因出险"
        @click="showPicker2 = true"
    />
    <van-popup v-model="showPicker2" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
      />
    </van-popup>

    <van-field
        readonly
        clickable
        name="calendar"
        :value="timeValue"
        label="日期选择："
        placeholder="发生事故的时间点"
        @click="showPopFn()"
    />
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()"
                           @cancel="cancelFn()"/>
    </van-popup>

    <van-cell title="理赔项目" value="" label="需要理赔的主要项目"/>
    <van-field name="checkboxGroup" label="">
      <template #input>
        <van-checkbox-group v-model="checkboxGroup"
                            direction="horizontal">
          <van-checkbox class="my-checkbox" icon-size="18px" name="门诊医疗" shape="square">门诊医疗</van-checkbox>
          <van-checkbox class="my-checkbox" icon-size="18px" name="住院医疗" shape="square">住院医疗</van-checkbox>
          <van-checkbox class="my-checkbox" icon-size="18px" name="住院津贴" shape="square">住院津贴</van-checkbox>
          <van-checkbox class="my-checkbox" icon-size="18px" name="特种疾病" shape="square">特种疾病</van-checkbox>
          <van-checkbox class="my-checkbox" icon-size="18px" name="重大疾病" shape="square">重大疾病</van-checkbox>
          <van-checkbox class="my-checkbox" icon-size="18px" name="特种药品" shape="square">特种药品</van-checkbox>
        </van-checkbox-group>
      </template>
    </van-field>

    <van-button @click="toClaimApplyPage(0)" type="info" size="large" class="my-botton">下一步</van-button>
  </div>
</template>

<script>
import storage from '@/utils/storage.js'

export default {
  name: "ClaimMain",
  data() {
    return {
      value: '张三',
      columns: ['张三', '李四', '王五'],
      showPicker: false,
      value2: '疾病',
      columns2: ['疾病', '意外'],

      showPicker2: false,
      value3: '理赔项目',
      columns3: ['理赔项目', '理赔项目2', '理赔项目3'],
      showPicker3: false,
      //日期组件
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      timeValue: '2021年12月20日',
      //选中的数组
      checkboxGroup: [],
      cardData:
          {
            "title": "医疗、疾病",
            "desc": "被保险人生病或发生意外",
            "thumb": "../static/images/medical.png"
          }
    }
  },
  created() {

  },
  methods: {
    onChange(id, item) {
    },
    backPrePage() {
      this.$router.go(-1);
    },
    toClaimApplyPage(index) {
      storage.set('checkboxGroup', this.checkboxGroup)

      if (index === 0) {
        this.$router.push('/apply/claim?value=' + this.value + "&value2=" + this.value2 + "&timeValue=" + this.timeValue)
        // this.$router.push({path: '/apply/claim', query: {id: index}})
      }
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onConfirm2(value) {
      this.value2 = value;
      this.showPicker2 = false;
    },
    onConfirm3(value) {
      this.value3 = value;
      this.showPicker3 = false;
    },
    showPopFn() {
      this.show = true;
    },
    showPopup() {
      this.show = true;
    },
    changeFn() { // 值变化是触发
      this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() { // 确定按钮
      this.timeValue = this.timeFormat(this.currentDate);
      this.show = false;
    },
    cancelFn() {
      this.show = false;
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '年' + month + '月' + day + '日'
    }
  },
  mounted() {
    this.timeFormat(new Date());
  }

}
</script>

<style lang="less" scoped>
.my-claim {
  background-color: #F7F7F7;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

.my-field {
  margin-top: 10%;
}

.van-card {
  background-color: #FFFFFF !important;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 20px;
}

.van-card__title {
  max-height: 32px !important;
  font-weight: bold !important;
  line-height: 20px !important;
  font-size: 20px !important;
  margin-top: 5px;
  color: #333333;
}

.van-card__desc {
  max-height: 60px !important;
  color: #646566;
  line-height: 85px !important;
  font-size: 15px;
}

.my-botton {
  height: 50px;
  width: 300px;
  margin-left: 10%;
  margin-top: 18%;
  border-radius: 5px;

}


.my-checkbox {
  margin-left: 15px;
  margin-bottom: 2%;
  margin-right: 45px;
  font-size: 15px;

}
</style>
